<script setup lang="ts">
import { ClusterOutlined, DownOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue'
import { computed, reactive, ref } from 'vue'
import { Empty, message, notification } from 'ant-design-vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import CreateRepoModal from './CreateRepoModal.vue'
import CheckRepoModal from './CheckRepoModal.vue'
import { api } from '@/api'
import type { Repo } from '@/api'
import { useAccountStore, useRepoStore } from '@/store'

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const { t } = useI18n()
const { repos } = storeToRefs(useRepoStore())
const { queryRepos } = useRepoStore()

const isCheckModalVisible = ref(false)
const isCreateModalVisible = ref(false)

const pagination = reactive({
  current: 1,
  pageSize: 6,
})

const searchKey = ref('')
const filterKey = ref('')

const filteredRepos = computed(() => {
  const { current, pageSize } = pagination
  let list = repos.value
  if (filterKey.value)
    list = repos.value.filter(item => item.repo_name.includes(filterKey.value))

  return list.slice((current - 1) * pageSize, current * pageSize)
})

const totalRepos = computed(() => repos.value.length)

const selectedRepo = ref<Repo>()

async function handleDeleteRepo(repo: Repo) {
  const { cluster_id, repo_id } = repo
  const params = {}
  params[cluster_id] = {
    repo_id_list: [repo_id],
  }
  const [, res] = await api.deleteRepo(params)
  if (res) {
    if (Object.values(res)[0].label !== 'Succeed') {
      notification.error({
        message: t('common.deleteFail'),
        description: Object.values(res)[0].label,
      })
    }
    else {
      pagination.current = 1
      pagination.pageSize = 6
      queryRepos()
      message.success(t('common.deleteSuccess'))
    }
  }
}

function handleSearch(key: string) {
  pagination.current = 1
  pagination.pageSize = 6
  filterKey.value = key
}

const { userInfo } = useAccountStore()
</script>

<template>
  <a-row type="flex" justify="space-between">
    <a-col>
      <a-input-search v-model:value="searchKey" :placeholder="$t('vul.repo.placeHolder.searchBy')" @search="handleSearch" />
    </a-col>
    <a-col v-if="userInfo?.type === 'administrator'">
      <a-space>
        <a-button type="primary" @click="isCreateModalVisible = true">
          {{ $t('vul.repo.newRepo') }}
        </a-button>
      </a-space>
    </a-col>
  </a-row>
  <a-empty v-if="filteredRepos.length === 0" :image="simpleImage" />
  <div v-else>
    <a-list
      :data-source="filteredRepos"
      :grid="{ gutter: 24, xxl: 3, xl: 3, lg: 4, md: 2, sm: 1, xs: 1 }"
      style="margin-top: 10px"
    >
      <template #renderItem="{ item }">
        <a-list-item style="padding: 0">
          <a-card
            :body-style="{ padding: 0 }"
            class="repo-card"
            @click="
              isCheckModalVisible = true;
              selectedRepo = item;
            "
          >
            <div class="repo-card-title">
              <h2>{{ item.repo_name }}</h2>
              <h4><ClusterOutlined style="color: #1677ff" /> {{ item.cluster_name }}</h4>
            </div>
            <a-row type="flex" justify="end" align="middle" class="repo-card-operate" @click.stop>
              <a-col>
                <a-space>
                  <a-popconfirm
                    v-if="userInfo?.type === 'administrator'"
                    :title="$t('vul.repo.sentence.deleteConfirm')"
                    :ok-text="t('common.confirm')"
                    :cancel-text="t('common.cancel')"
                    @confirm="handleDeleteRepo(item)"
                  >
                    <template #icon>
                      <QuestionCircleOutlined style="color: red" />
                    </template>
                    <a>{{ $t('common.delete') }}</a>
                  </a-popconfirm>
                  <a v-else disabled>{{ $t('common.delete') }}</a>

                  <a-divider type="vertical" />
                  <a-dropdown>
                    <a>
                      {{ $t('common.more') }}
                      <DownOutlined />
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item disabled>
                          <a>{{ $t('common.export') }}</a>
                        </a-menu-item>
                        <a-menu-item disabled>
                          <a>{{ $t('common.edit') }}</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-space>
              </a-col>
            </a-row>
          </a-card>
        </a-list-item>
      </template>
      <CheckRepoModal v-model:visible="isCheckModalVisible" :repo-info="selectedRepo!" />
    </a-list>
    <a-row v-if="filteredRepos.length" type="flex" justify="end">
      <a-col>
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :show-total="(total:number) => t('common.total', { count: total })"
          :total="totalRepos"
        />
      </a-col>
    </a-row>
  </div>

  <CreateRepoModal v-model:visible="isCreateModalVisible" />
</template>

<style lang="less" scoped>
.repo-card {
  border-radius: 4px;
  height: 140px;
  border-radius: 4px;
  height: 140px;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 0px 10px rgba(87, 113, 219, 0.45);
  }
  &-title {
    height: 100px;
    border-bottom: 1px solid var(--border-color);
    padding: 12px;
  }
  &-operate {
    height: 40px;
    padding: 0 12px;
    font-size: 8px;
  }
}
</style>
